import React, { memo, useEffect } from 'react'

import HYThemeHeaderNormal from '@/components/theme-header-normal';

import { HotAlbumWrapper } from './style'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getHotAlbumsAction } from '../../store/actionCreators'
import HYAlbumCover from '@/components/album-cover'

export default memo(function HYHotAlnum () {
  const dispatch = useDispatch();

  const { hotAlbums } = useSelector(state => ({
    hotAlbums: state.getIn(['album', 'hotAlbums'])
  }), shallowEqual)

  useEffect(() => {
    dispatch(getHotAlbumsAction())
  }, [dispatch])
  return (
    <HotAlbumWrapper>
      <HYThemeHeaderNormal title="热门新碟" />
      <div className="album-list">
        {
          hotAlbums.slice(0, 10).map((item, index) => {
            return <HYAlbumCover
              info={item}
              key={item.id}
              size={130}
              bgp={"-845px"}
              width={153}
            />
          })
        }
      </div>
    </HotAlbumWrapper>
  )
})
